/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class', // or 'media'
  content: ['./index.html', './src/**/*.{vue,ts,js}'],
  theme: {
    extend: {
      animation: {
        'bounce-slow': 'bounceLinear 4s infinite'
      },
      keyframes: {
        bounceLinear: {
          '0%,100%': {
            transform: 'translateY(0%) rotateZ(1deg)',
            'transform-origin': 'center',
            'animation-timing-function': 'ease-in-out'
          },
          '25%': {
            transform: 'translateY(-1%) rotateZ(0deg) ',
            'transform-origin': 'center',
            'animation-timing-function': 'linear'
          },
          '50%': {
            transform: 'translateY(0%) rotateZ(-1deg)',
            'transform-origin': 'center',
            'animation-timing-function': 'ease-in'
          },
          '75%': {
            transform: 'translateY(1%) rotateZ(0deg)',
            'transform-origin': 'center',
            'animation-timing-function': 'linear'
          }
        }
      },
      transitionProperty: {
        width: 'width',
        height: 'height',
        spacing: 'margin, padding'
      }
    }
  },
  plugins: []
}
